<template>

	<view class="szBody">

		<view class="carImg">
			<view class="imageDiv">
				<view class="imgBoder" @tap="myCart">
					<i class="iconfont icon-xianji xjIcon"></i>
					<view class="zzcs"></view>
					<image class="images" :src="userInfo.avatar" mode=""></image>
				</view>
				<text class="texts">点击更换头像</text>
			</view>
		</view>
 
		<view class="userDetails">

			<!-- <view class="Items">
				<text class="titles">手机号</text>
				<input class="inputClass"  placeholder-class="inputs" maxlength="11" placeholder="手机号" type="number"
					v-model="userInfo.mobile" />
			</view> -->

			<view class="Items">
				<text class="titles">姓名</text>
				<input class="inputClass" placeholder-class="inputs" placeholder="姓名" type="text"
					v-model="userInfo.realName" />
			</view>

			<view class="Items" @tap="showPicker=true">
				<text class="titles">性别</text>
				<text class="inputClass" style="width:400rpx;line-height:85rpx;">{{userInfo.sex | sexType}}</text>
				<i class="iconfont icon-xiangyou"></i>
			</view>

			<view class="Items">
				<text class="titles">电子邮件</text>
				<input class="inputClass" placeholder-class="inputs" placeholder="电子邮件" type="text"
					v-model="userInfo.email" />
			</view>

			<view class="Items">
				<text class="titles">任职部门</text>
				<input class="inputClass" placeholder-class="inputs" placeholder="任职部门" type="text"
					v-model="userInfo.officeName" />
			</view>

			<view class="Items">
				<text class="titles">任职公司</text>
				<input class="inputClass" placeholder-class="inputs" placeholder="任职公司" type="text"
					v-model="userInfo.companyName" />
			</view>
			
			<view class="Items">
				<text class="titles">旧密码</text>
				<input class="inputClass"  style="width:300rpx;" placeholder-class="inputs" placeholder="旧密码" :password="true" :disabled="true"
					v-model="userInfo.passWord" />
					<view class="pasdDiv" @tap="passwordTap">修改</view>
			</view>
			
			

			<view class="btnXg" @tap="xgTaps">确认修改</view>

		</view>



		<!-- 日期 -->
		<view class="zzc" @tap="showPicker=false" :class="showPicker==false?'zzcHide':''"></view>
		<view class="showPickerDiv" :class="showPicker==true?'showSixH':''">
			<view class="myButtom" v-if="showPicker">
				<text @tap="showPicker=false">取消</text>
				<text>请选择</text>
				<text @tap="yesTap">确认</text>
			</view>
			<template v-if="showPicker">
				<picker-view class="sixDiv" @change="sixChange" :value="pickerArr">
						<picker-view-column>
							<view class="sixDivitem" v-for="(item,index) in sexList" :key="index">{{item}}</view>
						</picker-view-column>
				</picker-view>
			</template>
		</view>
	</view>




	</view>

</template>

<script>
	import {postSave} from '@/common/api/table.js';
	export default {
		data() {
			return {
				showPicker:false,
				pickerArr:[0],
				sexList:['女','男'],
				sexIndex:0,
				userInfo:{}
			}
		},


		onShow() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				//没有头像使用默认头像
				if (userInfo.avatar == null) {
					userInfo.avatar = '../../static/image/boy.png';
					let back = uni.getStorageSync('userAccount');
					userInfo.passWord = back.passWord;
				};
				this.userInfo = JSON.parse(JSON.stringify(userInfo));
			}
		},

		filters: {
			sexType(sex) {
				if (sex == 1) {
					return `男`;
				} else if (sex == 0) {
					return `女`;
				} else {
					return `未知`;
				}
			}
		},

		methods: {
			
			passwordTap(){
				uni.showModal({
				    title: '提示',
				    content: '修改后需立即从新登录,确认修改?',
				    success:res=> {
				        if (res.confirm) {
							console.log('确定');
							uni.navigateTo({
								url:'./user-xgPassword' 
							})
				        } else if (res.cancel) {
				            console.log('取消');
				        }
				    }
				});
			},
			
			yesTap(){
				this.userInfo.sex  = this.sexIndex;
				this.showPicker = false;
				this.sexIndex = 0;
			},
			
			sixChange(e){
				this.sexIndex = e.detail.value[0];
			},
			
			
			myCart() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //指定压缩图，
					sourceType: ['album', 'camera'], //相册 拍照
					success: respath => {
						const file = respath.tempFiles[0];
						const url = this.$serverUrl + '/uploadFile';
						let token = uni.getStorageSync('token');
						uni.uploadFile({
							//APP
							// #ifdef APP-PLUS
							header: {
								'Access-Token': token
							},
							// #endif
							//H5
							// #ifdef H5
							header: {
								'access-token': token
							},
							// #endif
							url: url,
							filePath: file.path, 
							name: 'file',
							success: res => {
								console.log(11,res)
								return;
								//可能token过期，跳转登录页
								if (res.statusCode == 401) {
									//删除过期的账户信息
									uni.removeStorageSync('token');
									uni.removeStorageSync('userInfo');
									uni.showToast({
										icon:'none',
										title:"登录过期从新登录"
									})
									setTimeout(()=>{
										//拿到之前登录账户名称密码
										let back = uni.getStorageSync('userAccount');
										uni.navigateTo({
											url: `../user/user-dl?userObj=${JSON.stringify(back)}`
										})
									},1500);
								} else if (res.statusCode == 200) {
									let obj = JSON.parse(res.data);
									this.userInfo.avatar = obj.url;
									uni.showToast({
										icon: "none",
										title: '添加成功'
									})
								}
							},
							err(err) {
								uni.showToast({
									icon: "none",
									title: '添加失败!'
								})
							}
						})
					}
				});
			},


			xgTaps() {
				let obj ={
					avatar:this.userInfo.avatar,
					realName:this.userInfo.realName,
					sex:this.userInfo.sex,
					email:this.userInfo.email,
					officeName:this.userInfo.officeName,
					companyName:this.userInfo.companyName
				}
				postSave(obj)
				.then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title:'修改成功'
						});
						//覆盖缓存的用户信息
						uni.setStorageSync('userInfo',this.userInfo);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.szBody {
		width: 750rpx;
		height: 100vh;
		background-color: white;
	}

	.userDetails {
		margin: 0 auto;
		margin-top: 50rpx;
		padding: 30rpx 0;
		width: 690rpx;
		background-color: white;
		border-radius: 15rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

		.Items {
			width: 690rpx;
			height: 85rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			.titles {
				font-size: 30rpx;
				width: 140rpx;
				text-align: start;
				margin-left: 35rpx;
			}

			.inputClass {
				width: 500rpx;
				height: 85rpx;
			}

			.inputs {
				font-size: 30rpx;
				color: #C8C7CC;
			}
		}
	}

	.btnXg {
		width: 300rpx;
		height: 70rpx;
		background-color: #007AFF;
		text-align: center;
		line-height: 70rpx;
		border-radius: 25rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		color: white;
	}

	.carImg {
		width: 750rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;

		.imageDiv {
			width: 150rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.imgBoder {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				overflow: hidden;
				position: relative;

				.images {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					border: 3rpx solid #e7f8ff;
					box-sizing: border-box;
				}

				.xjIcon {
					position: absolute;
					z-index: 11;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #C8C7CC;
					font-size: 60rpx;
				}

				.zzcs {
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.4);
					position: absolute;
					border-radius:50%;
					top: 0rpx;
					z-index: 10;
				}
			}

			.texts {
				color: black;
				font-size: 25rpx;
			}
		}
	}
	
	
	.sixDiv {
			width: 750rpx;
			height: 400rpx;
			background-color: #f8f8f8;
			text-align: center;
		}
	
		.sixDivitem {
			text-align: center;
			line-height: 68rpx;
		}
	
		.myButtom {
			display: flex;
			justify-content: space-around;
			padding:30rpx 0;
		}
	
		.showPickerDiv {
			position: fixed;
			bottom: 0rpx;
			height: 0rpx;
			transition: height 0.5s;
			background-color: white;
			z-index: 2;
			border-top-left-radius:15rpx;
			border-top-right-radius:15rpx;
		}
	
		.zzc {
			width: 100%;
			height: 834rpx;
			display: block;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0rpx;
			z-index: 1;
			transition: all 2s;
		}
	
		.zzcHide {
			display: none !important;
		}
	
		.showSixH {
			height: 560rpx !important;
		}
		.pasdDiv{
			width:100rpx;
			height:50rpx;
			margin:auto;
			background-color:#007AFF;
			border-radius:125rpx;
			color:white;
			text-align:center;
			line-height:50rpx;
			font-size:25rpx;
		}
</style>
